<!--事件搜索
@search=
:keyValue=
-->
<template>
    <div class="search-head">
        <div class="search-box iconfont icon-sousuo">
            <input class="search-input" type="search" v-model="value" placeholder="搜索内容"
                   @focus="focus" @blur="blur" v-focus-bottom
                   @change="search" @keyup.13="search">
        </div>
        <div class="cover" v-if="cover"
             style="height: calc(100% - 40px);height: -moz-calc(100% - 40px);height: -webkit-calc(100% - 40px);"></div>
    </div>
</template>

<script>
    export default {
        props: ['keyword'],
        data() {
            return {
                value: '',
                cover: false,
            }
        },
        mounted() {
            this.value = this.keyword
        },
        watch: {
            'keyword': function (cur, old) {
                this.value = cur
            }
        },
        methods: {
            search() {
                this.$emit('search', this.value)
                this.cover = false
            },
            focus() {
                this.cover = true
            },
            blur() {
                this.cover = false
            },
        }
    }
</script>
<style lang="less" scoped>
    .search-head {
        z-index: 1000;
        height: 40px;
        padding: 5px 15px;
        width: 100%;
        position: fixed;
        top: 0rem;
        box-sizing: border-box;
        background: #fff;
        .cover {
            position: fixed;
            left: 0;
            top: 40px;
            width: 100%;
            height: calc(100% - (40px));
            height: -moz-calc(100% - (40px));
            height: -webkit-calc(100% - (40px));
            min-height: 80%;
            background: rgba(0, 0, 0, .7);
            z-index: 99
        }
        .search-box:before {
            color: #999;
            font-size: 14px;
            margin-left: -20px;
        }
        .search-box {
            height: 30px;
            border-radius: 35px;
            background: #f9f9f9;
            padding: 8px 20px 8px 40px;
            box-sizing: border-box;
            .search-input {
                width: 100%;
                border: 0;
                outline: oldlace;
                background: #f9f9f9;
                padding-left: 5px;
                line-height: 15px;
                font-size: 13px;
            }
        }
    }
</style>
